<template>
  <div v-show="this.$store.state.isShowAll" class="writeBlog">
    <el-form :inline="true" class="addForm">
      <el-form-item label="Blog标题">
        <el-input v-model="blogTitle" placeholder="Blog标题"></el-input>
      </el-form-item>
      <el-form-item label="封面图URL">
        <el-input v-model="bigImgUrl" placeholder="封面图URL"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-input v-model="blogTag" placeholder="Tag"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addBlog">新增blog</el-button>
        <el-button type="primary" @click="clearBlog">重置</el-button>
      </el-form-item>
    </el-form>
    <v-md-editor v-model="text" height="800px"></v-md-editor>

    <h2>上传图片:</h2>
    <div class="uploadFile">
      <!-- ul、li标签用于展示从本地添加的预览图片 -->
      <ul v-show="uploadImg.length!=0">
        <li v-for="(item,index) in uploadImg"
            :key="index"
            class="addPic">
          <img :src="item.imgData">
          <textarea v-model="item.imgSrc" readonly></textarea>
        </li>
      </ul>
      <input id="file"
             accept="image/*"
             type="file"
             @change="getPicture($event)">
      <button v-show="showInputImg"
              @click="callFile">+
      </button>
    </div>


  </div>
</template>

<script>
export default {
  name: "WriteBlog",
  data() {
    return {
      text: '',
      uploadImg: [],
      blogTitle: 'blog标题',
      blogTag: '',
      bigImgUrl: '封面图片url'
    }
  },
  computed: {
    showInputImg() {
      return this.uploadImg.length < 12;
    }
  },
  methods: {
    getPicture(e) {
      //预览图片
      let src = window.URL.createObjectURL(e.target.files[0]);
      // this.uploadImg.push(src);
      //将图片文件转化成base64格式图片
      var reader = new FileReader();
      let url = 'http://shilezhi.club:8082/Api/img/UploadImg'
      this.axios.defaults.withCredentials = true;
      this.axios.defaults.headers.post["Content-Type"] =
          "application/json;charset=utf-8";
      reader.onload = (e) => {
        //e.target.result  就是从本地读取的图片的base64格式,将它上传给服务器即可
        //使用axios的post方法上传即可
        console.log(e)

        let postData = {
          token: this.$store.state.userToken,
          imgData: e.target.result
        }
        this.axios.defaults.withCredentials = true;
        this.axios.defaults.headers.post["Content-Type"] =
            "application/json;charset=utf-8";
        this.axios.post(url, JSON.stringify(postData)).then(
            response => {
              // this.uploadImg.push(e.target.result);
              if (response.data.code === 'ok') {
                // this.uploadImg.push(e.target.result)
                this.$message.success('上传成功')

                this.uploadImg.push({
                  imgData: e.target.result,
                  imgSrc: 'http://shilezhi.club:8082/Api/img/getImg/' + response.data.id
                })
              } else {
                this.$message.warning(response.data.info)
              }
            },
            err => {
              console.log(err)
            }
        )


      }
      reader.readAsDataURL(e.target.files[0])
    },
    callFile() {
      //点击添加图片按钮，触发type:"file"的input标签
      let fileDom = document.querySelector("#file")
      fileDom.click()
    },
    addBlog() {
      let url = 'http://shilezhi.club:8082/Api/Blog/AddBlog'
      let postData = {
        token: this.$store.state.userToken,
        blog: {
          Title: this.blogTitle,
          Tag: this.blogTag,
          Content: this.text,
          BigImgSrc: this.bigImgUrl
        }
      }
      this.axios.defaults.withCredentials = true;
      this.axios.defaults.headers.post["Content-Type"] =
          "application/json;charset=utf-8";
      this.axios.post(url, JSON.stringify(postData)).then(
          response => {

            if (response.data.code === 'ok') {
              this.$message.success('添加成功')
            } else {
              this.$message.warning('添加失败' + response.data.info)
            }
          },
          err => {
            console.log(err)
          }
      )

    },
    clearBlog() {
      this.text = '';
      this.blogTitle = 'blog标题';
      this.blogTag = '';
      this.bigImgUrl = '封面图片url';
    }
  }
}
</script>

<style scoped>
.writeBlog {
  display: flex;
  flex-flow: column;

}

.upload {
  margin-top: 1.875rem;;

  height: 18.75rem;
  border: 1px solid;
}

input {
  /* 隐藏默认的"打开文件"样式 */
  display: none;
}

.uploadFile {
  display: flex;
  /* height: 120px; */
  line-height: 7.5rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgb(235, 235, 235);
  /*overflow: hidden;*/
}

.uploadFile ul {
  display: flex;
}

.uploadFile ul li {
  margin-right: 0.625rem;
  display: flex;
  flex-flow: column;
  margin: 1.25rem;
}

.uploadFile .addPic img {
  height: 6.25rem;
  width: 6.25rem;
  border: 0.0625rem #545C64 solid;
  box-shadow: 0.0625rem 0.125rem 0.3125rem #e1e1e1;
}

.uploadFile ul li textarea {
  width: 6.25rem;
  height: 3.125rem;
  resize: none;
  box-shadow: 0.0625rem 0.125rem 0.3125rem #e1e1e1;
  outline-color: #59ACFF;
  margin-top: 0.3125rem;
}

.writeBlog textarea {
  width: 6.25rem;
  height: 3.125rem;
  resize: none;
  box-shadow: 0.0625rem 0.125rem 0.3125rem #e1e1e1;
  outline-color: #59ACFF;
  /*margin: 10px;*/

}


.uploadFile button {
  height: 6.25rem;
  margin: 1.25rem;
  width: 6.25rem;
  font-size: 3.125rem;
  border: 1px dashed rgb(182, 182, 182);
  color: rgb(182, 182, 182);
  background-color: rgb(243, 243, 243);
  flex-shrink: 0;
}

.addForm {
  padding: 1.25rem;
}


</style>